<template>
	<view>
		<div v-for="(scenicSpot, index) in lineData" :key="index">
			<view class="cu-timeline">
				<view class="cu-time">{{scenicSpot.goTime}}</view>
				<view class="cu-item text-white">
					<view class="bg-blue content">
						<text>前往景点</text> {{scenicSpot.scenicName}}<text>游玩打卡</text>
					</view>
					<image v-if="scenicSpot.imageC" :src="`${backEndUrl}/img/show/${scenicSpot.imageC}`"
						style=" border-radius: 5px;"></image>
					<view class="bg-cyan content">
						<text>介绍：{{scenicSpot.scenicDescribe1}}</text>
					</view>
					<video class="bg-red align-center" v-if="scenicSpot.movie" :src="`${scenicSpot.movie}`"></video>

				</view>
			</view>
		</div>
		<view>

			<!-- //支付form表单 -->
			<view class="cu-form-group">
				<view class="title">参加人数</view>
				<input type="number" placeholder="请输入参加人数..." confirm-type="done" confirm-hold="true"
					v-model="togetherNumber" />
			</view>
			<view class="cu-form-group" @click="open">
				<view class="title">时间</view>
				<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
				<!-- <button @click="open">打开日历</button> -->
			</view>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="date" start="2022-10-01" end="2025-09-01" @change="DateChange" type="text"
					name="userName" @input="userInput" confirm-type="done" confirm-hold="true" v-model="date">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">订单金额</view>
				<input name="input">{{amount}}元</input>
			</view>
			<view class="padding">
				<button class="cu-btn block bg-blue margin-tb-sm lg"
					@click="subBtn(openid,amount,togetherNumber,reservationTime)" @tap="showModal"
					data-target="bottomModal">
					<text v-if="loadFlag" class="cuIcon-loading2 cuIconfont-spin"></text>立即支付
				</button>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @click="paying(openid,orderid)">确定</view>

				</view>
				<view class="padding-xl">
					使用余额支付 <text style="color: red;font-size: 50rpx;" @click="">{{amount}}</text>元
				</view>
			</view>
		</view>

		<!-- 
		<view class="box bg-white text-center radius lg">
			<button class="cu-btn bg-yellow round lg" @tap="showModal" data-target="bottomModal"
				formType="submit">支付</button>
		</view> -->
		<!-- <view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 底部窗口
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="bottomModal">Bottom</button>
			</view>
		</view> -->


		<!-- <view class="box bg-white text-center radius">
			<button class="cu-btn bg-red round lg" @click="toPaying(id,amount)">立即预定</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				togetherNumber: '',
				openid: 'oxAGy5QHBIvaV2o1AuXFOjjjJSwQ', //模拟一下
				orderid:'100705320552103936',
				
				modalName: null,
				date: '2022-10-1',
				index: -1,
				picker: [1, 2, 3, 4, 5, 6],
				amount: '',
				backEndUrl: this.backEndUrl,
				id: '',
				lineData: [],

				status: 'PAID',
				// 表单数据
				userInp: '',
				userLen: '',
				loadFlag: false,
				isAble: true,
				reservationTime: ''

			}
		},
		methods: {
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			},
			// userInput(e) {
			// 	// console.log(e);
			// 	this.userInp = e.target.value;
			// 	this.userLen = e.target.cursor;
			// 	if (this.userLen > 0) {
			// 		this.isAble = false
			// 	} else {
			// 		this.isAble = true
			// 	}
			// 	console.log('form发生了submit事件，携带数据为：', e.target.value);
			// },
			// subBtn(e) {
			// 	this.loadFlag = true,
			// 		this.isAble = true
			// 	var $this = this;
			// 	setTimeout(function() {



			// 		uni.showToast({
			// 			title: "支付成功!"
			// 		});

			// 		$this.loadFlag = false
			// 		$this.isAble = false
			// 		setTimeout(function () {
			// 		     //要延时执行的代码
			// 			 uni.navigateTo({
			// 			 	url:'./paying'
			// 			 })
			// 		    }, 1000) //延迟时间 这里是1秒
			// 	}, 2000)
			// },

			subBtn(openid, amount, togetherNumber, reservationTime) {
				console.log(openid);
				console.log(togetherNumber);
				console.log(reservationTime);
				console.log(amount);
				// this.status = this.status;
				//console.log(status);
				this.$axios({
					method: 'POST',
					url: '/order/createOrder/' + this.openid + amount + togetherNumber,
					params: {
						reservationTime: reservationTime,
						status: this.status
					}

				}).then(res => {
					this.openid = res.data;

				}).catch(err => {
					console.log(err)
				})
				setTimeout(function() {
					uni.showToast({
						title: "支付成功!"
					});
					setTimeout(function() {
						//要延时执行的代码
						uni.reLaunch({
							url: '/pages/my/my'
						})
					}, 1000) //延迟时间 这里是1秒
				}, 1000)
			},

			paying(openid,orderid) {
				console.log(openid);
			
				console.log(orderid);
				// this.status = this.status;
				//console.log(status);
				this.$axios({
					method: 'POST',
					url: '/payment/createPayment/'+openid+'&'+orderid
		

				}).then(res => {
					this.openid = res.data;

				}).catch(err => {
					console.log(err)
				})
				setTimeout(function() {
					uni.showToast({
						title: "支付成功!"
					});
					setTimeout(function() {
						//要延时执行的代码
						uni.reLaunch({
							url: '/pages/my/my'
						})
					}, 1000) //延迟时间 这里是1秒
				}, 1000)
			},


			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			DateChange(e) {
				this.date = e.detail.value
			},


		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			console.log("预定金额" + option.amount);
			// this.openid = option.openid;
			this.id = option.id;
			this.amount = option.amount;
		},


		mounted() {
			this.$axios({
				method: 'get',
				url: '/line/lineDetail/' + this.id,
			}).then(res => {
				this.lineData = res.data;
				let i = 0;
				for (let item in this.lineData) {
					if (i == 0) {
						this.$set(this.showArea, item, true);
					} else {
						this.$set(this.showArea, item, false);
					}
					i++;
				}
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style>

</style>
